<template>
<div>
  <search></search>
<el-table
    :data="goodsList"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="商品图片">
           <img :src="props.row.listImages" alt="">
          </el-form-item>
          <el-form-item label="商品编号">
            <span>{{ props.row.number }}</span>
          </el-form-item>
          <el-form-item label="商品名称">
            <span>{{ props.row.name }}</span>
          </el-form-item>
          <el-form-item label="商品分类">
            <span>{{ props.row.classifyId.name }}</span>
          </el-form-item>
          <el-form-item label="商品价格">
            <span>{{ props.row.price }}</span>
          </el-form-item>
          <el-form-item label="商品库存">
            <span>{{ props.row.store }}</span>
          </el-form-item>
          <el-form-item label="商品描述">
            <span>{{ props.row.intro }}</span>
          </el-form-item>
           <el-form-item label="商品操作">
            <el-button size="mini" round @click="upDateOne(props.row)">修改</el-button>
            <el-button size="mini" round  @click="delOne(props.row)">删除</el-button>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      label="商品编号"
      prop="number">
    </el-table-column>
    <el-table-column
      label="商品名称"
      prop="name">
    </el-table-column>
    <el-table-column
      label="商品分类"
      prop="classifyId.name">
    </el-table-column>
    <el-table-column
      label="商品价格"
      prop="price">
    </el-table-column>
    <el-table-column
      label="商品库存"
      prop="store">
    </el-table-column>
  </el-table>
  <br>
  <page></page>

</div>
     
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const {
  mapState: mapStateGoods,
  mapActions: mapActionsGoods
} = createNamespacedHelpers("goods");
import axios from 'axios';
import page from "./page"
import search from "./search"
export default {
  components:{
    page,
    search
  },
    computed: {
        ...mapStateGoods(["goodsList"])
    },
    mounted() {
       this.getGoods();
    },
    methods: {
       ...mapActionsGoods(["getGoods"]),
      //删除数据
      delOne(selectedObj){
        axios
        .delete("/goods/deleteOne",{data:{_id:selectedObj._id}})
        .then(res=>{
          if(res.data){
            this.getGoods()
          }
        })
      },
      //修改数据
      upDateOne(selectedObj){
        let _id=selectedObj._id;
        this.$router.push(`/All/upDateGoods/${_id}`)
      }
    },
}
</script>

<style>
.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  img{
    width:100px
  }
</style>